<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>基于SSM的英语单词背诵系统</title>
    <meta name="description" content="Ela Admin - HTML5 Admin Template">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="https://i.imgur.com/QRAUqs9.png">
    <link rel="shortcut icon" href="https://i.imgur.com/QRAUqs9.png">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css">
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.0/css/flag-icon.min.css">
    <link rel="stylesheet" th:href="@{/static/css/cs-skin-elastic.css}">
    <link rel="stylesheet" th:href="@{/static/css/style.css}">

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>


</head>

<body>


<div th:replace="common/leftbar::leftbar"></div>


<div id="right-panel" class="right-panel">

    <!-- Header-->
    <!-- Header-->
    <div th:replace="common/header::header"/>

    <div class="breadcrumbs">
        <div class="breadcrumbs-inner">
            <div class="row m-0">
                <div class="col-sm-4">
                    <div class="page-header float-left">
                        <div class="page-title">
                            <h1>当前位置</h1>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="page-header float-right">
                        <div class="page-title">
                            <ol class="breadcrumb text-right">
                                <li><a href="#">主页</a></li>
                                <li><a href="#">学习中心</a></li>
                                <li class="active">收藏</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <strong class="card-title">收藏栏</strong>
                    </div>
                    <div class="card-body">
                        <table class="table table-layout:fixed">
                            <thead>
                            <tr>
<!--                                <th scope="col">序号</th>-->
                                <th scope="col">单词</th>
                                <th scope="col">读音</th>
                                <th scope="col">解释</th>
                                <th scope="col">等级</th>
                                <th scope="col">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <style type="text/css">.table {
                                table-layout: fixed
                            }</style>

                            <tr th:each="word:${word}">
<!--                                <td th:text="${word.getWordId()}">序号</td>-->
                                <td th:text="${word.getWordName()}">单词</td>
                                <td th:text="${word.getAudio()}">读音</td>
                                <td th:text="${word.getExplanation()}">解释</td>
                                <td><b>
                                    <div th:switch="${word.getGrade()}">
                                        <b th:case="1">四级</b>
                                        <b th:case="2">六级</b>
                                        <b th:case="3">托福</b>
                                        <b th:case="4">雅思</b>
                                    </div>
                                </b></td>
                                <td>
                                    <a class="btn btn-sm btn-danger"
                                       th:href="@{/deleteWordCollection/}+${word.getWordId()}">取消收藏</a>
                                </td>
                            </tr>

                            </tbody>
                        </table>

                        <!--分页开始-->
                        <div class="col-sm-12 col-md-12">
                            <div class="dataTables_paginate paging_simple_numbers" id="bootstrap-data-table_paginate">

                            </div>
                        </div>
                        <!--分页结束-->

                    </div>

                    <nav aria-label="Page navigation example">
                        <ul class="pagination justify-content-center">
                            <div th:if="${!page.hasPrevious()}">
                                <li class="page-item disabled">
                                    <a class="page-link" th:href="@{/wordCollection/}+${pageId-1}">Previous</a>
                                </li>
                            </div>
                            <div th:if="${page.hasPrevious()}">
                                <li class="page-item">
                                    <a class="page-link" th:href="@{/wordCollection/}+${pageId-1}">Previous</a>
                                </li>
                            </div>

                            <li class="page-item"><a class="page-link" href="#" th:text="${pageId}">1</a></li>

                            <div th:if="${!page.hasNext()}">
                                <li class="page-item disabled">
                                    <a class="page-link" th:href="@{/wordCollection/}+${pageId+1}">Next</a>
                                </li>
                            </div>
                            <div th:if="${page.hasNext()}">
                                <li class="page-item">
                                    <a class="page-link" th:href="@{/wordCollection/}+${pageId+1}">Next</a>
                                </li>
                            </div>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

    </div><!-- .content -->

    <div class="clearfix"></div>

    <div th:replace="common/footer::footer"/>


</div><!-- /#right-panel -->


<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.4/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-match-height@0.7.2/dist/jquery.matchHeight.min.js"></script>
<script th:src="@{/static/js/main.js}"></script>
</body>
</html>